<template>

  <div class="box">
    <!-- 这是一个商品的搜索页面 -->
    <!-- 想要使用  第一步添加路由 -->
    <!-- 头部的搜索框 -->
    <form action="/" >
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"   
        @cancel="onCancel"
        @clear="clearFn(eve)"   
      />  <!-- clear="clearFn" 这个是搜索框的删除时候触发的-->
       <!-- @search="onSearch"  这里是在搜索框中输入数据后按 确认(enter)键后会触发 -->
       <!-- @cancel="onCancel"     // 这里是点击取消按钮的 -->
    </form>


<!-- 下面是从首页点击进来的导航页面 -->
  <div v-if="info">     <!--点击出现的搜索页面-->
   <div >
    <van-icon name="delete" @click="delFn"/>   <!--点击删除历史记录-->
    <h6>历史记录</h6>
    <van-tag  type="primary" v-for="(item,index) in historyKeywordList" :key="index" @click="qingqiuFn(item)">
      {{item}}
     </van-tag>
   </div>
   <div>
    <h6>热门搜索</h6>
    <van-tag  type="primary" v-for="(item,index) in hotKeywordList" :key="index" @click="qingqiuFn(item.keyword)">
      {{item.keyword}}
     </van-tag>
   </div>
  
 

  </div >
   <div v-else>   <!--商品的显示-->
    <!-- 商品的导航栏 -->
    <van-dropdown-menu>
      <van-dropdown-item disabled title="全部" />
      <van-dropdown-item
        v-model="order"
        :options="option1"
        title="价格"
        @change="changeFn"
      />
      <!-- 注意这里的默认选中是以商品中的chencked的状态而选择的  这里我们需要将value2 设置为一个计算属性 -->
      <van-dropdown-item v-model="value2" :options="filterCategory" title="分类" @change="sortFn"/>
    </van-dropdown-menu>
   
   <!-- 这个是如果没有商品的时候显示的 -->
     <van-empty
  class="custom-image"
  image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
  description="描述文字"
  v-show="off"
   />



    <!-- 使用商品详情的组件 并将子组件需要的数据进行传递(父传子)-->
    
    <Goodschild :goodsList="goodsList" :totalPages="totalPages" :page="page"  @transfer="fn"></Goodschild>

   <!-- 懒加载 -->
    </div>
  </div>
</template>

<script>
// 引入商品的详情的子组件
import Goodschild from "@/views/Goodschild.vue";
// 引入页面需要的请求
import { Goodsdata ,searchdata,deletedata} from "@/utils/http";
export default {
  name: "GoodsSearch",
  data() {
    return {
    info:true,  //用于商品的展示的页面是否显示
    historyKeywordList:[],  //历史记录需要使用的数据
    hotKeywordList:[],      //热门搜索需要的数据
    default:'',    //没用
    show:false,  
    off:false,     //这个是当没有商品的时候进行显示

    number:'',
      value: "",
      value1: 0, //这个是价格所依赖的数据
      
      goodsList: [], //这个是子组件所依赖的数据,其中的元素就是每一条的商品
      keyword: "", // 搜索关键字
      page: 1, // 默认页数
      size: 20, // 每页数据的条数
      order: "desc", // desc 由高到低  asc 由低到高
      categoryId: 0, // 商品类别id  全部 居家 服装  配件 ....
      sort: "id", // 排序方式 根据分类id 还是价格price
      filterCategory:[], //这个是商品分类的数据
      totalPages:0,   //这个代表的是总的页数
      option1: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
      // option2: [
      //   { text: "默认排序", value: "a" },
      //   { text: "好评排序", value: "b" },
      //   { text: "销量排序", value: "c" },
      // ],
    };
  },
  computed: {  //注意计算属性是对象的形式
  // 第一步循环所有的商品遍历其中的checked属性的值
  value2:{        //既然computed是对象形式的,那么其中的属性,也应是键值对的形式
    // 书写其的get方法
    get(){
        let bool
       this.filterCategory.forEach((key)=>{
           if(key.checked){  //这里是判断当商品的checked属性的值为true的时候,就将值赋值给 bool
            bool=key.value
           }
       }) 
       return bool   //最后返回bool,注意现在这个值是一个  布尔类型的
    },
    set(){

    }
  }
    
  },
  components: {
    // 注册商品详情的子组件
    Goodschild,
  },
  created() {
    
  searchdata().then((res)=>{
    console.log(res);
    this.historyKeywordList=res.data.data.historyKeywordList   //历史记录数据
    this.hotKeywordList=res.data.data.hotKeywordList  //热门搜索数据
    // console.log(this.hotKeywordList);
  })
   this.goodsrequest()     //在页面创建完成之后,调用发送请求
  //  console.log(this);
  },
   watch:{                //进行数据监听,当数据发生改变时就调用其的方法
     size(newvalue, oldvalue){
      // console.log(newvalue);
        if(newvalue != oldvalue){
          this.goodsrequest()      //调用获取商品的请求
        }
     }
   },


updated(){
//  在调用一个发送服务器的请求
// this.goodsrequest();
setTimeout(()=>{
//  this.size=this.$refs.part.number;   //获取子组件中的number的值,赋值给 自身中代表页数的属性
         this.size=this.number;   
},1000)
  },

  methods: {
    fn(val){   //这个是从子组件传递到父组件的数据  形参val就是传递的值
 this.number=val;
    },
   
    /**************************** 搜索框的事件开始****************************/
    onSearch(val) {
      // 这里是在搜索框中输入数据后按 确认(enter)键后会触发   
    console.log(val);
    this.info=false      //这里是当点击搜索的确认键的时候 显示商品列表页面    
    this.keyword=val     //将搜索的数据赋值给发送请求需要的关键
    //  输入完成或调用请求
    this.goodsrequest()    
    
    },
    onCancel() {
      // 这里是点击取消按钮的
      // 点击取消按钮就返回首页
      this.$router.push("/home");   
    },
    
     clearFn(eve){   //这个是在搜索框删除的时候触发的事件  这个不能用
     console.log(eve);
    },
    /*&******************************搜索框的事件结束**************************/


    qingqiuFn(val){
      // console.log(this.default);
      // console.log(val);
      this.keyword=val,    //这里是点击历史记录的时候,  将历史记录的值赋值给  请求中需要的关键字 
      this.info=false     //这里是将商品列表页面显示
      this.goodsrequest()   //这里是发送获取商品的请求

    },
  // 点击删除历史记录
  delFn(){
    deletedata().then(res=>{    //调用清除历史记录的请求
      console.log(res);
      // if(res.data.errno==0){
        this.historyKeywordList=[]  //历史记录需要使用的数据
    //  }
    })

  },
  



    changeFn(val) {
      // 这个是点击商品的价格排序,会触发的函数
      // 当点击商品的价格排序的时候,触发请求
      // 第一步将点击的商品价格代表的属性值修改  并将排序的方式this.sort修改为price
      this.order=val;
      this.sort='price';
      // console.log(val);
      // 调用一次请求
      this.goodsrequest();    
    },
    goodsrequest(){
       let params={
      keyword:this.keyword,    // 搜索关键字
      page:this.page,          // 默认页数
      size: this.size,        // 每页数据的条数
      order: this.order,       // desc 由高到低  asc 由低到高
      categoryId: this.categoryId, // 商品类别id  全部 居家 服装  配件 ....
      sort: this.sort,          // 排序方式 根据分类id 还是价格price
    }
    //  在组件创建完成阶段发送请求
    Goodsdata(params).then((res) => {
      console.log(res);
      // 将搜索到的商品的数据赋值到 this.goodsList中,并将其传递到子组件中
      this.goodsList = res.data.data.goodsList;
      // 将服务器的返回值中的商品的分类赋值给this.filterCategory
      this.filterCategory=res.data.data.filterCategory;
      // 将服务器返回的总的页数赋值给this.totalPages
      this.totalPages=res.data.data.totalPages;
     if(this.goodsList.length==0){
          this.off = true;
      }else{
        this.off = false;
      }

     
      // 注意现在的分类的数据格式和我们想要的不一致,需要修改
      // 第一步将其转换为字符串  注意服务器的返回值为JSON格式的
      this.filterCategory=JSON.parse(   //将JSON字符串转换为JSON对象
      JSON.stringify( this.filterCategory )  //将JSON对象转换为JSON字符串    
        .replace(/name/g,'text')   //使用字符串的替换的方法 用正则进行判读,将字符串中的name修改为text
        .replace(/id/g,"value")    //使用字符串的替换的方法 用正则进行判读,将字符串中的id修改为value     
       )    
      //  console.log(this.filterCategory);
    });
    },

    // 这个是点击分类所触发的事件
    sortFn(val){  //注意这个形参是商品的id值
      // console.log(val);
      if(val != 0){   //  这里是判断一下当点击的不是全部商品的时候就修改 就修改请求的商品的id
  // 第一步触发事件,修改请求参数中的  id值
      this.categoryId=val;
      }else{
        console.log(1111111111);
        this.categoryId=0
      }
      // 第二步重新发送请求
      this.goodsrequest();
    },

   
  },
};
</script>

<style scoped lang='less'>
.box{
  /deep/.van-tag--primary{
    margin-left:5px;
  }
  /deep/.van-icon{
    float:right;
  }
   .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
}
</style>